import React from 'react'
import defaultAvartarSrc from "../../../../../../res/images/web/together/我的碎片@2x.png";

const FuliResultItem = props => {
    const user = props.user
    const avatarSrc = user?.Iconurl || defaultAvartarSrc
    const blocks = user.Block
    return <div className='mg-b-1px' style={{background: '#F5F7FF', padding: '8px 12px', ...props.style,}}>
        <div className='flex-space-between-align-center'>
            <div className='text-align-center' style={{width: '46px', textOverflow: 'ellipsis', marginRight: '10%',}}>
                <img alt='' src={avatarSrc} style={{width: 28, height: 28, borderRadius: '50%',}}/>
                <p style={{width: '46px', textOverflow: 'ellipsis', overflow: 'hidden',}}>{user.Nickname}</p>
            </div>

            <div className='flex-space-between-align-center flex-1'>
                {blocks.map((b, i) => {
                    return <div key={i} style={{position: 'relative', height: 34}}>
                        <img src={b.Url[0]} alt='' style={{width: 34, height: 34,}}/>
                        <div style={{
                            width: 16,
                            height: 16,
                            background: '#FA7268',
                            borderRadius: '50%',
                            color: '#fff',
                            position: 'absolute',
                            bottom: '-2px',
                            right: '-6px',
                            fontSize: '10px',
                            lineHeight: '16px',
                            textAlign: 'center',
                        }}>{b.Count}</div>
                    </div>
                })}
            </div>
        </div>
    </div>

}

export default FuliResultItem